<script>
export default {
  name: "DetailView"
}
</script>

<template>
<div style="width:1200px ;margin: 0 auto">
  <el-row :gutter="20">
    <el-col :span="18">
      <el-card>
        <h1 style="color:orange;text-align: center">爆浆抹茶甜甜圈面包，自带幸福感的小甜甜</h1>
        <p style="font-size: 12px;color: #666 ;text-align: center">
          作者：光胜 | 发表时间；2025/8/4 16:45:30 | 阅读数：1000</p>
        <el-divider></el-divider>
        <el-card style="font-size: 12px">
          <b style="color:#0aa1ed">摘要：</b>
          爆浆抹茶甜甜圈面包，自带幸福感的小甜甜
        </el-card>
        <p style="height: 500px">文章正文</p>
      </el-card>
      <!-- 评论相关 -->
      <el-card style="margin-top: 10px">
        <p>发一个友善的评论</p>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="22">
            <el-input placeholder="请输入评论内容"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary">发布</el-button>
          </el-col>
        </el-row>
        <!-- 评论列表 -->
        <el-row style="margin-top: 10px" v-for="item in 4">
          <el-col :span="2" style="margin-top: 15px" >
            <el-avatar src="/imgs/head.jpg"></el-avatar>
          </el-col>
          <el-col :span="22">
            <span style="font-weight: bold;color: orange">光胜哥</span>
            <p style="margin: 5px 0">看起来好吃</p>
            <span style="font-size: 12px;color: #666">2025/8/4 16:45:30</span>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div id="head_div"></div>
        <div style="text-align: center;position: relative;top:-50px">
          <img src="/imgs/head.jpg"
               style="border: 5px solid white;
               border-radius: 90px;width: 90px;height: 90px">
          <p style="font-weight: bold;font-size: 20px;margin: 0">光胜哥</p>
          <i class="el-icon-edit">本文作者</i><br>
          <i class="el-icon-time">2025/8/4 16:45:30</i>
        </div>
      </el-card>
      <el-card>
        <!-- 作者其他文章 -->
        <h3>作者主要文章</h3>
        <el-divider></el-divider>
        <el-row :gutter="20" v-for="item in 5">
          <el-col :span="10">
            <img src="/imgs/a.jpg" style="width: 100%;height: 70px">
          </el-col>
          <el-col :span="14">
            <p style="margin: 0;height: 50px">爆浆抹茶甜甜圈面包</p>
            <i class="el-icon-time">2025/8/4</i>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <!-- 作者其他文章 -->
        <h3>作者其他文章</h3>
        <el-divider></el-divider>
        <el-row :gutter="20" v-for="item in 5">
          <el-col :span="10">
            <img src="/imgs/a.jpg" style="width: 100%;height: 70px">
          </el-col>
          <el-col :span="14">
            <p style="margin: 0;height: 50px">爆浆抹茶甜甜圈面包</p>
            <i class="el-icon-time">2025/8/4</i>
          </el-col>
        </el-row>
      </el-card>

    </el-col>
  </el-row>
</div>
</template>

<style scoped>
#head_div{
  height: 80px;
  background-image: url("/public/imgs/avarbg.jpg");
}
</style>